﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>优惠券</title>
    <link type="text/css" rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
    <script src="js/alert.js"></script>
    <style>
        * {
            text-decoration: none;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #hear {
            width: 100%;
            height: 44px;
            line-height: 45px;
            border-bottom: 1px solid #cccccc;
        }

        #hear a {
            font-weight: normal;
            color: black;
        }

        #hear li {
            text-align: center;
            float: left;
            height: 45px;
        }

        #hear li:nth-of-type(1) {
            width: 33%;
            float: left;
        }

        #hear li:nth-of-type(2) {
            width: 33%;
            float: left;
        }

        #hear li:nth-of-type(3) {
            width: 34%;
            float: right;
        }


        #contentop .action {
            display: block;
        }



        #contentop span {
            font-size: 1.3em;
           /* color: #47B0D7;*/
        }



        #contentop .Buy div:nth-of-type(1) {
            text-align: left;
            padding-left: 15px;
        }

        #contentop .Buy div:nth-of-type(2) {
            float: right;
        }


        .yhqbj{
            background-image: url(img/yhj.png);
            /*width: 380px;*/
            height: 112px;
            overflow: hidden;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin: 3%;
        }

        .coupon-div1{
            width: 70%;
            height: 76px;
            float: left
        }
        .coupon-div2{
            float: right;width: 28%;height: 110px;
        }
        .coupon-div3{
            float: right;width: 70%;height: 33px;
        }
        .coupon-div3-n{
            float: right;width: 70%;height: 33px;
        }
        .coupon-div1-price{
            margin: 14px 0 3px 20px;color: #3F51B5;font-size: 19px;
        }
        .coupon-div1-date{
            font-size: 12px;margin: 10px 18px;color: #a4a4a4;
        }
        .coupon-div2-price{
            margin-top: 20px;margin-left: 15%;color: white;
        }
        .coupon-div2-can{
            font-weight:100;font-size: 12px;margin: 10px 15%;color: #fff;
        }
    </style>

    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

    <script>
        $(function () {
            $("#hear li").click(function () {
                $(this).css({
                    borderBottom: "2px solid #3F51B5",
                    height: "43px"


                }).siblings().css({
                    borderBottom: "none",
                    height: "45px"

                });
                $(this).children("a").css({
                    color:"#3F51B5"
                }).parent().siblings().children("a").css({
                    color:"#000000"
                });

                $(this).children("a").children("span").css({
                    color:"#3F51B5"
                }).parent().parent().siblings().children("a").children("span").css({
                    color:"#000000"
                })

            });

            $("#hear li").click(function () {
                $(this).addClass("action").siblings().removeClass("action");
                var index = $(this).index();
                $("#contentop li").eq(index).css("display", "block").siblings().css("display", "none");
            });
        });
    </script>
</head>
<body>
<div data-role="page" style="background-color: #f6f6f6">
    <div data-role="content-floud">
        <div style="font-family: '微软雅黑';">
            <ul id="hear" style="background-color: #ffffff">
                <li class="action" style="border-bottom: 2px solid #3F51B5;height: 43px;"><a style="color:#3F51B5;" href="#">未使用<span id="can_c" style="color: #3F51B5;">(0)</span></a>
                </li>
                <li><a href="#">已使用<span id="alr_c" style="color: #000000;">(0)</span></a></li>
                <li><a href="#">已过期<span id="old_c" style="color: #000000;">(0)</span></a></li>
            </ul>
            <ul id="contentop">

                <li id="can" class="action">
                    <div class="yhqbj">
                        <div class="coupon-div1">
                            <div class="coupon-div1-price">20元优惠券</div>
                            <div class="coupon-div1-date">2016.02.01至2016.08.25</div>
                        </div>
                        <div class="coupon-div2">
                            <div class="coupon-div2-price"><span>￥</span><span style="font-size:  1.6em;">200</span></div>
                            <div class="coupon-div2-can">满299使用</div>
                        </div>
                        <div class="coupon-div3" data-code="123abc">
                            <div style="margin: 7px 19px; color: #5f5f5f; font-size: 15px;">立即使用</div>
                        </div>
                    </div>
                </li>

                <li id="alr" style="display: none">
                    <div class="yhqbj">
                        <div class="coupon-div1">
                            <div class="coupon-div1-price">200元优惠券</div>
                            <div class="coupon-div1-date">2016.02.01至2016.08.25</div>
                        </div>
                        <div class="coupon-div2">
                            <div class="coupon-div2-price"><span>￥</span><span style="font-size: 1.6em;">200</span></div>
                            <div class="coupon-div2-can">满299使用</div>
                        </div>
                        <div class="coupon-div3">
                            <div style="margin: 7px 19px; color: #5f5f5f; font-size: 15px;">立即使用</div>
                        </div>
                    </div>
                </li>

                <li id="old" style="display: none">

                    <div class="yhqbj">
                        <div class="coupon-div1">
                            <div class="coupon-div1-price">20元优惠券</div>
                            <div class="coupon-div1-date">2016.02.01至2016.08.25</div>
                        </div>
                        <div class="coupon-div2">
                            <div class="coupon-div2-price"><span>￥</span><span style="font-size: 1.6em;">200</span></div>
                            <div class="coupon-div2-can">满299使用</div>
                        </div>
                        <div class="coupon-div3">
                            <div style="margin: 7px 19px; color: #5f5f5f; font-size: 15px;">立即使用</div>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
    </div>
</div>
<!--二维码-->
<div id="code-data" style="position: fixed;width: 85%;height: 60%;margin: 30% 6%;;background-color: #ffffff;border: 1px solid #000000;
border-radius: 5%;">
    <div style="margin-top: 2%;"><span style="margin-left: 35%;font-size: 1.4em;">扫码使用</span><span style="float: right;margin-right: 4%;" id="exit"><i class="fa fa-times" style="font-size: 2em"></i></span></div>
    <div>
        <div style="width: 200px;height: 200px;position: fixed; left: 0; right: 0; margin: auto;top: 30%;">
            <div id="code"></div>
            <div id="code-v" style="font-size: 30px;text-align: center;margin-top: 10px;">asd78w26</div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
<script>

    $(document).ready(function () {
        $('#code-data').hide();

        $("#can").empty();
        $("#alr").empty();
        $("#old").empty();

        $.ajax({
            "url": "/vip/oldcoupon/",
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                var can = 0;
                var alr = 0;
                var old = 0;

                var data = json.data;
                console.log(data);
                for (var i = 0; i < data.length; i++) {

                    var html = '<div class="yhqbj">' +
                        '<div class="coupon-div1">' +
                        '<div class="coupon-div1-price">#{money}#{type}</div>' +
                        '<div class="coupon-div1-date">#{datebeg}至#{dateend}</div>' +
                        '</div>' +
                        '<div class="coupon-div2">' +
                        '<div class="coupon-div2-price"><span>#{p}</span><span style="font-size: 1.6em;">#{money}</span></div>' +
                        '<div class="coupon-div2-can">满#{original}元使用</div>' +
                        '</div>' +
                        '<div class="coupon-div3"  data-code="#{code}" id="div3_#{cid}">'+
                        '<div style="margin: 7px 19px; color: #5f5f5f; font-size: 15px;">立即使用</div>'+
                        '</div>'+
                        '</div>';

                    html = html.replace("#{cid}",i);
                    html = html.replace("#{type}", data[i].type);
                    html = html.replace("#{original}", data[i].original/*=="null"?data[i].original:0*/);
                    if ("折扣券"!=data[i].type){
                        html = html.replace("#{money}", data[i].money+"元");
                        html = html.replace("#{money}", data[i].money);
                        html = html.replace("#{p}", "￥");
                    } else {
                        html = html.replace("#{money}",data[i].discount*10+"折");
                        html = html.replace("#{money}", " &nbsp;&nbsp;&nbsp;"+ data[i].discount*10+"<span style='font-size: 12px'>折</span>");
                        html = html.replace("#{p}", "");
                    }

                    html = html.replace("#{code}", data[i].code);
                    var date = data[i].datebeg;
                    date = date.substring(0, 4) + "." + date.substring(4, 6) + "." + date.substring(6, 8);
                    html = html.replace("#{datebeg}", date);
                    html = html.replace("#{datebeg}", date);

                    date = data[i].dateend;
                    date = date.substring(0, 4) + "." + date.substring(4, 6) + "." + date.substring(6, 8);
                    html = html.replace("#{dateend}", date);
                    html = html.replace("#{dateend}", date);

                    if (data[i].verifyed == "否" && data[i].valided == "是") {
                        can++;
                        $("#can").prepend(html);
                        continue;
                    }
                    if (data[i].verifyed == "是") {
                        alr++;
                        $("#alr").prepend(html);
                        $("#div3_"+i).empty().removeClass().addClass("coupon-div3-n");
                        continue;
                    }
                    if (data[i].valided == "否") {
                        old++;
                        $("#old").prepend(html);
                        $("#div3_"+i).empty().removeClass().addClass("coupon-div3-n");

                    }
                }
                $("#can_c").html("(" + can + ")");
                $("#alr_c").html("(" + alr + ")");
                $("#old_c").html("(" + old + ")");
            }
        })
    });
    $("div").delegate(".coupon-div3","click",function () {
        $('#code').empty();
        var code = $(this).data("code");
        $('#code').qrcode({width:200,height:200,text:code});
        $('#code-v').html(code);
        $('#code-data').attr("display","block");
        $('#code-data').show();
    });
    $("#exit").click(function () {
        $('#code-data').attr("display","none");
        $('#code-data').hide();
    })
</script>
</html>

